<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<meta charset="UTF-8" />
<head>
  <title>Home</title>
  <script th:src="@{sockjs.min.js}"></script>
  <script th:src="@{stomp.min.js}"></script>
  <script th:src="@{jquery-3.2.1.min.js}"></script>
</head>
<body>
<p>
  聊天室 :
  <span id="username" th:text="${session.SPRING_SECURITY_CONTEXT.authentication.principal.username}"></span>
</p>

<form id="wiselyForm">
  <textarea rows="4" cols="60" name="text"></textarea>
  <input type="submit"/>
</form>

<script th:inline="javascript">
  $('#wiselyForm').submit(function(e){
    e.preventDefault();
    var text = $('#wiselyForm').find('textarea[name="text"]').val();
    sendSpittle(text);
  });
  //链接endpoint名称为 "/endpointChat" 的endpoint。
  var sock = new SockJS("/endpointChat");
  var stomp = Stomp.over(sock);
  stomp.connect('guest', 'guest', function(frame) {

    /**  订阅了/user/queue/notifications 发送的消息,这里雨在控制器的 convertAndSendToUser 定义的地址保持一致, 
     *  这里多用了一个/user,并且这个user 是必须的,使用user 才会发送消息到指定的用户。 
     *  */
    var username = $("#username").text();
    stomp.subscribe("/queue/notifications/"+username, handleNotification);
  });

  function handleNotification(message) {
    $('#output').append("<b>Received: " + message.body + "</b><br/>")
  }

  function sendSpittle(text) {
    stomp.send("/oneToOne", {}, JSON.stringify({ 'name': text }));//3
  }
  $('#stop').click(function() {sock.close()});
</script>

<div id="output"></div>
</body>
</html>